<template>
    <div>
        <van-nav-bar
			title="充值记录"
			left-text="返回"
			left-arrow
            fixed
			@click-left="onClickLeft" />

        

        <div class="order">
            <div class="van-submit-bar__tip">
                <van-icon name="info-o" />
                如有疑问请联系客服
            </div>
			<div
				class="date"
				v-for="item in list"
				:key="item.id">
				<div class="info">
					<div> 充值金额:￥ {{ item.point }}<span>{{ item.status_text }}</span></div>
                    <div class="time">{{ item.createtime }}</div>
				</div>
                <div class="content">备注信息：{{ item.content }}</div>
			</div>
		</div>

        <!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
    </div>
</template>

<script>
import { showFailToast } from 'vant';
export default {
    created() {
        this.PayRecord();
    },
    data() {
        return {
            list: [],
			isLoading: false,
        }
    },
    methods: {
        async PayRecord(){
            this.isLoading = true;
            let res = await this.$api.PayRecord({
                busid: this.$cookies.get("User").id
            });
            if (res.code != 1) {
                showFailToast({ message: res.msg });
            }
            this.list = res.data;
        },  
        // 返回
        onClickLeft() {
            this.$router.push("/business");
        },
        
    },
}
</script>

<style lang="less" scoped>
.order{
    padding: 50px 5px 0 5px;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    .date{
        width: 100%;
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-top: 10px;
        .info{
            width: 100%;
            height: 30px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px gray dotted;
            div{
                &:nth-child(1){
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    font-size: 18px;
                    width: 60%;
                    height: 100%;
                    span{
                        width: 50px;
                        height: 80%;
                        color: white;
                        background-color: blue;
                        margin-left: 8px;
                        display: flex;
                        font-size: 14px;
                        align-items: center;
                        justify-content: center;
                        border-radius: 4px;
                    }
                }

                &:nth-child(2){
                    color: gray;
                    font-size: 12px;
                }
            }
        }
        .content{
            color: gray;
            align-self: flex-start;
            padding: 6px;

        }
    }
    
}
</style>